<template>
  <div class="code-drawer">
    <div class="code-but-operation">
      <span class="s">tabs数据解析</span>
      <el-input v-model="propsData.tabsProp.dataParsing" placeholder="数据格式 status;//审批状态:1待审批/2不通过/3通过" clearable class="mr-12 "></el-input>
      <el-button type="primary" @click="startParsingClick">开始解析</el-button>
    </div>
    <div class="code-br mt-15"></div>
    <div class="code-but-operation mt-15">
      <span class="s">切换的字段名</span>
      <el-input v-model="propsData.tabsProp.statusField" placeholder="切换的字段名" clearable class="mr-12 wd180"></el-input>
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addBut">添加tabs</el-button>
    </div>
    <draggable v-model=" propsData.tabsProp.tabsArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.tabsProp.tabsArray" :key="key">
        <li>
          <span>tabs名称</span>
          <el-input v-model="item.label" placeholder="tabs名称" clearable></el-input>
        </li>
        <li>
          <span>tabs值</span>
          <el-input v-model="item.value" placeholder="tabs值" clearable></el-input>
        </li>
        <li class="del">
          <el-button type="danger" @click="delBut(key)">删除</el-button>
        </li>
      </ul>
    </draggable>
    <div class="code-br mt-15"></div>
    <div class="code-but-operation mt-15 mb-15">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addSearchData">添加搜索字段</el-button>
    </div>
    <div class="code-but-operation mb-15">
      <span class="s">搜索数据解析</span>
      <el-input v-model="propsData.tabsProp.dataParsing2" placeholder="请输入搜索数据解析" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable class="mr-12 "></el-input>
      <el-button type="primary" @click="startParsingClick2">开始解析</el-button>
    </div>
    <draggable v-model=" propsData.tabsProp.searchArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.tabsProp.searchArray" :key="key">
        <li>
          <span>字段名称</span>
          <el-input v-model="item.name" placeholder="字段名称" clearable></el-input>
        </li>
        <li>
          <span>字段</span>
          <el-input v-model="item.field" placeholder="字段" clearable></el-input>
        </li>
        <li class="but-type">
          <span>数据类型</span>
          <el-select v-model="item.type" placeholder="数据类型">
            <el-option
                v-for="item in $store.state.tabsTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="item.optionField" v-if="item.type.includes('单选框') || item.type.includes('多选框') || item.type.includes('下拉框')" placeholder="选择下拉选项">
            <el-option
                v-for="item in propsData.optionProp.optionArray"
                :key="item.value"
                :label="item.notes"
                :value="item.field">
            </el-option>
          </el-select>
          <template v-if="item.type.includes('范围')">
            <el-input v-model="item.startField" placeholder="开始字段" clearable></el-input>
            <el-input v-model="item.endField" placeholder="结束字段" clearable></el-input>
          </template>
        </li>
        <li class="del">
          <el-button type="danger" @click="delSearchData(key)">删除搜索字段</el-button>
        </li>
      </ul>
    </draggable>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //开始解析tabs
    startParsingClick() {
      if (this.propsData.tabsProp.dataParsing) {
        this.propsData.tabsProp.tabsArray = [{label: '全部', value: ''}];
        let dataParsing = this.propsData.tabsProp.dataParsing.split(':')
        //切换的字段名
        let str = dataParsing[0];
        let indexss = str.lastIndexOf(";")
        let resolvess = str.substring(0, indexss);
        this.propsData.tabsProp.statusField = resolvess;

        //tabs 数组
        let tabsArrayData = dataParsing[1];
        let tabsArrayDataArray = tabsArrayData.split('/');
        for (let i = 0; i < tabsArrayDataArray.length; i++) {
          let jsonData = {}
          let str = tabsArrayDataArray[i];
          jsonData.value = str.replace(/\D/g, "");
          let indexs = str.indexOf(str.replace(/\D/g, ""))
          let resolves = str.substring(indexs + 1, str.length);
          jsonData.label = resolves
          this.propsData.tabsProp.tabsArray.push(jsonData);
        }
      }
    },
    //搜索数据解析
    startParsingClick2() {
      if (!this.propsData.tabsProp.dataParsing2) {
        return false
      }
      let dataParsing = this.propsData.tabsProp.dataParsing2.split('\n');
      for (let i = 0; i < dataParsing.length; i++) {
        let data = dataParsing[i].trim().split(';//');
        let fieldJsonData = {
          name: data[1],//字段名称 用于注释
          field: data[0],//字段
          type: '输入框',//数据类型
          startField: '',//开始字段
          endField: '',//结束字段
          optionField: '',//选项字段

        }
        this.propsData.tabsProp.searchArray.push(fieldJsonData);
      }
      this.$message.success('解析成功')
    },
    //添加tabs按钮
    addBut() {
      let jsonData = {
        label: '',
        value: ''
      }
      this.propsData.tabsProp.tabsArray.push(jsonData);
    },
    //删除tabs按钮
    delBut(key) {
      this.propsData.tabsProp.tabsArray.splice(key, 1);
    },
    //添加搜索字段
    addSearchData() {
      let jsonData = {
        name: '',//字段名称
        field: '',//字段
        type: '',//数据类型
        startField: '',//开始字段
        endField: '',//结束字段
        optionField: '',//选项字段
      }
      this.propsData.tabsProp.searchArray.push(jsonData);
    },
    //删除搜索字段
    delSearchData(key) {
      this.propsData.tabsProp.searchArray.splice(key, 1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
